import { eventTrack, messages } from "share/common";
import React, { Component } from "react";
import { Carousel, Icon } from "antd";
import AMapBannerImg from "images/ad-img/a-map/banner.jpg";
import AMapBannerEnImg from "images/ad-img/a-map/banner_en.jpg";
import BannerImg from "images/home/banner.jpg";
import BannerEnImg from "images/home/banner_en.jpg";
import FullScreen from "components/full-screen";
import AdHuaBei from "containers/advertisement-page/ad-hua-bei";
import AdAMap from "containers/advertisement-page/ad-a-map";
import "styles/home/advertisement.scss";
import { withRouter } from "react-router";

class Advertisement extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showAdvertisementAMap: false,
      showAdvertisement: false,
    };
    this.adList = [
      {
        title: messages("basic-1.key292") /*高德企业用车*/,
        imgSource: AMapBannerImg,
        imgSourceEn: AMapBannerEnImg,
        toggleKey: "showAdvertisementAMap",
      },
      {
        title: messages("basic-1.key293") /*企业花呗*/,
        imgSource: BannerImg,
        imgSourceEn: BannerEnImg,
        toggleKey: "showAdvertisement",
      },
    ];
  }

  componentWillMount() {}

  componentDidMount() {
    // 监听浏览器点击返回 (目的 是 打开花呗广告 按浏览器返回键 不会从首页跳走)
    this.props.router.setRouteLeaveHook(this.props.route, this.routerWillLeave);
    this._isMounted = true;
  }

  componentWillUnmount() {
    this.hideAdvertisement();
    this._isMounted = false;
  }

  routerWillLeave = (nextLocation) => {
    if (this.state.showAdvertisement || this.state.showAdvertisementAMap) {
      if (!this._isMounted) {
        return true;
      }
      this.setState({ showAdvertisement: false, showAdvertisementAMap: false });
      return false;
    }
  };

  hideAdvertisement = () => {
    this.setState({ showAdvertisementAMap: false, showAdvertisement: false });
  };

  handleToggle = (item) => {
    const obj = {};
    obj[item.toggleKey] = true;
    this.setState(obj);
    eventTrack({
      category: "1218-新首页-埋点",
      action: `点击查看了【${item.title}】的广告页`,
      label: this.props.tenant.tenantName,
    });
  };

  render() {
    const { showAdvertisement, showAdvertisementAMap } = this.state;
    const { language } = this.props;
    return (
      <div className="ad-box one-third-content">
        <Carousel dots autoplay arrows prevArrow={<Icon type="left" />} nextArrow={<Icon type="right" />}>
          {this.adList.map((item) => {
            return (
              <div
                className={`single-carousel ${language.code === "zh_cn" ? "allow-click" : ""}`}
                onClick={() => {
                  language.code === "zh_cn" && this.handleToggle(item);
                }}
                style={{ backgroundImage: `url('${language.code === "zh_cn" ? item.imgSource : item.imgSourceEn}')` }}
              >
                {item.title && (
                  <div className="carousel-title" style={{ bottom: 0 }}>
                    {item.title}
                  </div>
                )}
              </div>
            );
          })}
        </Carousel>
        {showAdvertisement && (
          <FullScreen animateIn="fadeIn" animateOut="fadeOut" style={{ background: "#FFFFFF" }}>
            <AdHuaBei onCancel={this.hideAdvertisement} />
          </FullScreen>
        )}
        {showAdvertisementAMap && (
          <FullScreen animateIn="fadeIn" animateOut="fadeOut" style={{ background: "#FFFFFF" }}>
            <AdAMap onCancel={this.hideAdvertisement} />
          </FullScreen>
        )}
      </div>
    );
  }
}

Advertisement.propTypes = {};

export default withRouter(Advertisement);
